<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="css/index.css" type="text/css" rel="stylesheet" />
		<link href="css/reset.css" type="text/css" rel="stylesheet" />
		<link href="font/iconfont.css" type="text/css" rel="stylesheet" />
		<script src="js/main.js"></script>
	</head>
	<body>
		<!--顶部-->
		<div id="topBar">
			<div class="center">
				<a href="index.html" class="left">
		             <img src="img/logo.png" title="logo" alt="logo" />
		        </a>
		        <div class="right">
		            <a href="#"><i class="iconfont icon-weibo"></i>官方微博</a>
		            <a href="#"><i class="iconfont icon-weixin"></i>官方微信</a>
		            <a href="#"><i class="iconfont icon-dianhua"></i>联系电话</a>
		        </div>	
			</div>
		</div>
		<!--导航菜单栏-->
		<div id="navBar">
			<ul class="center">
				<li class="liLeft">
		            <a href="index.html" class="menu">首页</a>
		        </li>
		        <li class="liLeft">
		            <a href="#"  class="menu">关于我们</a>
		            <div class="menuList">
						<ul class="ulList">
							<li><a href="#">公司简介</a></li>
							<li><a href="#">组织机构</a></li>
							<li><a href="#">公司简介</a></li>
						</ul>
						<div class="account img1">
							<p>本网讯11月15日，公司召开2021年第23次党委扩大会，学习《中国共产党第十九届中央委员会第六次全体会议公报》......<a href="#">详情</a></p>
						</div>
					</div>
		        </li>
				<li class="liLeft">
		            <a href="#"  class="menu">新闻中心</a>
		            <div class="menuList">
						<ul class="ulList">
							<li><a href="#">最新动态</a></li>
							<li><a href="#">要闻</a></li>
							<li><a href="#">视频</a></li>
							<li><a href="#">图片风采</a></li>
						</ul>
						<div class="account img2">
							<p>12月6日，国家电网有限公司召开冬奥合作工作领导小组会议，深入学习贯彻党的十九届六中全会精神和习近平总书记关于北京2022年冬奥会筹办工作重要指示精神，.......<a href="#">详情</a></p>
						</div>
					</div>
		        </li>
		        <li class="liLeft">
		            <a href="#"  class="menu">科技创新</a>
		            <div class="menuList">
						<ul class="ulList">
							<li><a href="#">最新动态</a></li>
							<li><a href="#">要闻</a></li>
							<li><a href="#">视频</a></li>
							<li><a href="#">图片风采</a></li>
						</ul>
						<div class="account img3">
							<p>12月6日，国家电网有限公司召开冬奥合作工作领导小组会议，深入学习贯彻党的十九届六中全会精神和习近平总书记关于北京2022年冬奥会筹办工作重要指示精神，.......<a href="#">详情</a></p>
						</div>
					</div>
		        </li>
		        <li class="liLeft">
		            <a href="#"  class="menu">业务领域</a>
		            <div class="menuList">
						<ul class="ulList">
							<li><a href="#">最新动态</a></li>
							<li><a href="#">要闻</a></li>
							<li><a href="#">视频</a></li>
							<li><a href="#">图片风采</a></li>
						</ul>
						<div class="account img4">
							<p>12月6日，国家电网有限公司召开冬奥合作工作领导小组会议，深入学习贯彻党的十九届六中全会精神和习近平总书记关于北京2022年冬奥会筹办工作重要指示精神，.......<a href="#">详情</a></p>
						</div>
					</div>
		        </li>
		        <li class="liLeft">
		            <a href="#"  class="menu">公示公告</a>
		            <div class="menuList rightAlign">
						<ul class="ulList">
							<li><a href="#">最新动态</a></li>
							<li><a href="#">要闻</a></li>
							<li><a href="#">视频</a></li>
							<li><a href="#">图片风采</a></li>
						</ul>
						<div class="account img5">
							<p>12月6日，国家电网有限公司召开冬奥合作工作领导小组会议，深入学习贯彻党的十九届六中全会精神和习近平总书记关于北京2022年冬奥会筹办工作重要指示精神，.......<a href="#">详情</a></p>
						</div>
					</div>
		        </li>
		        <li class="liLeft">
		            <a href="#"  class="menu">电力科普</a>
		            <div class="menuList rightAlign">
						<ul class="ulList">
							<li><a href="#">最新动态</a></li>
							<li><a href="#">要闻</a></li>
							<li><a href="#">视频</a></li>
							<li><a href="#">图片风采</a></li>
						</ul>
						<div class="account img6">
							<p>12月6日，国家电网有限公司召开冬奥合作工作领导小组会议，深入学习贯彻党的十九届六中全会精神和习近平总书记关于北京2022年冬奥会筹办工作重要指示精神，.......<a href="#">详情</a></p>
						</div>
					</div>
		        </li>
			</ul>	
		</div>
		<!--轮播图-->
		<div id="banner">
			<ul class="bg">
				<li><img src="img/banner1.JPG"/></li>
				<li><img src="img/banner2.JPG" /></li>
				<li><img src="img/banner3.jpg"/></li>
			</ul>
			<div class="tab banTab">
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<!--固定导航-->
		<div id="fixBar">
			<ul>
				<li><a href="#">电网</a></li>
				<li><a href="#">国际</a></li>
				<li><a href="#">产业</a></li>
				<li><a href="#">科技</a></li>
				<li><a href="#">服务</a></li>
				<li><a href="#">金融</a></li>
			</ul>

		</div>
		<!--主体部分-->
		<div id="main">
			<div class="center">
				<!--滚动公告-->
				<div class="notice iconfont icon-gonggao">
				    <ul class="noticeList">
				        <li><a href="#">公告1</a></li>
				        <li><a href="#">公告2</a></li>
				        <li><a href="#">公告3</a></li>
				        <li><a href="#">公告4</a></li>
				    </ul>
				    <a href="#" class="iconfont icon-gengduo1">更多</a>
				</div>

				<!--动态和新闻列表-->
				<div class="list">
					<div class="dynamic bgStyle">
						<div class="title">
							<span>最新动态</span>
							<a href="#" class="iconfont icon-gengduo1">更多</a>
						</div>
						<div class="content">
							<div class="banner">
								<ul class="bg" id="dynBanner">
									<li><img src="img/bg1.JPG" title="" alt=""/></li>
									<li><img src="img/bg2.JPG" title="" alt=""/></li>
									<li><img src="img/bg3.JPG" title="" alt=""/></li>
								</ul>
								<div class="tab dynTab" id="dynTab">
									<span></span>
									<span></span>
									<span></span>
								</div>
							</div>
							<div class="newsList">
								<ul>
									<li>
										<a href="#">辛保安董事长与国家能源集团董事长会谈</a>
										<span>2022/03/23</span>
									</li>
									<li>
										<a href="#">春雪纷飞 保障供电</a>
										<span>2022/03/23</span>
									</li>
									<li>
										<a href="#">守阵地 战疫情 保供电</a>
										<span>2022/03/23</span>
									</li>	
								</ul>
							</div>
						</div>
					</div>
					<div class="news bgStyle">
						<div class="title">
							<span>要闻</span>
							<i>|</i>
							<span>综合新闻</span>
							<a href="#" class="iconfont icon-gengduo1">更多</a>
						</div>
						<div class="content">
							<div class="newsList">
								<ul>
									<li>
										<a href="#">111辛保安董事长与国家能源集团董事长会谈</a>
										<span>2022/03/23</span>
									</li>
									<li>
										<a href="#">春雪纷飞 保障供电</a>
										<span>2022/03/23</span>
									</li>
									<li>
										<a href="#">守阵地 战疫情 保供电</a>
										<span>2022/03/23</span>
									</li>
									<li>
										<a href="#">守阵地 战疫情 保供电</a>
										<span>2022/03/23</span>
									</li>
									<li>
										<a href="#">守阵地 战疫情 保供电</a>
										<span>2022/03/23</span>
									</li>
								</ul>
							</div>
							
							
							<div class="newsList" style="display: none;">
								<ul>
									<li>
										<a href="#">222辛保安董事长与国家能源集团董事长会谈</a>
										<span>2022/03/23</span>
									</li>
									<li>
										<a href="#">春雪纷飞 保障供电</a>
										<span>2022/03/23</span>
									</li>
									<li>
										<a href="#">守阵地 战疫情 保供电</a>
										<span>2022/03/23</span>
									</li>
									<li>
										<a href="#">守阵地 战疫情 保供电</a>
										<span>2022/03/23</span>
									</li>
									<li>
										<a href="#">守阵地 战疫情 保供电</a>
										<span>2022/03/23</span>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!--视频列表-->
				<div class="video bgStyle">
					<div class="title">
							<span>视频</span>
							<a href="#" class="iconfont icon-gengduo1">更多</a>
					</div>
					<div class="content">
							 <div class="left">
				                 <video width="440px" controls="controls" poster="img/bg4.JPG">
				                       <source src="img/movie.mp4"></source>
				                 </video>
				            </div>

							<div class="newsList right">
								<ul>
									<li>
										<a href="#">辛保安董事长与国家能源集团董事长会谈</a>
										<span>2022/03/23</span>
									</li>
									<li>
										<a href="#">春雪纷飞 保障供电</a>
										<span>2022/03/23</span>
									</li>
									<li>
										<a href="#">守阵地 战疫情 保供电</a>
										<span>2022/03/23</span>
									</li>
									<li>
										<a href="#">守阵地 战疫情 保供电</a>
										<span>2022/03/23</span>
									</li>
									<li>
										<a href="#">守阵地 战疫情 保供电</a>
										<span>2022/03/23</span>
									</li>
								</ul>
							</div>
						</div>
				</div>
				<!--图片风采-->
				<div class="imgList bgStyle">
					<div class="title">
							<span>风采图片</span>
							<a href="#" class="iconfont icon-gengduo1">更多</a>
					</div>
					
					<div class="content h">
			            <div class="iconfont icon-lunbozuofangun"></div>
			            <div class="iconfont icon-lunboyoufangun"></div>
			            <div class="item">
			                  <ul>
			                        <li>
			                              <img src="img/img1.jpg"/>
			                              <div class="hidden">
			                                    <p>......</p>
			                                    <a href="#">查看详情</a>
			                              </div>
			                        </li>
			                        <li>
			                              <img src="img/img2.JPG"/>
			                              <div class="hidden">
			                                    <p>......</p>
			                                    <a href="#">查看详情</a>
			                              </div>
			                        </li>
			                        <li>
			                              <img src="img/img3.JPG"/>
			                              <div class="hidden">
			                                    <p>......</p>
			                                    <a href="#">查看详情</a>
			                              </div>
			                        </li>
			                        <li>
			                              <img src="img/img4.JPG"/>
			                              <div class="hidden">
			                                    <p>......</p>
			                                    <a href="#">查看详情</a>
			                              </div>
			                        </li>
			                        <li>
			                              <img src="img/img5.JPG"/>
			                              <div class="hidden">
			                                    <p>......</p>
			                                    <a href="#">查看详情</a>
			                              </div>
			                        </li>
			                        <li>
			                              <img src="img/img6.JPG"/>
			                              <div class="hidden">
			                                    <p>......</p>
			                                    <a href="#">查看详情</a>
			                              </div>
			                        </li>
			                  </ul>
			        </div>		
    			  </div>

				</div>
			</div>	
		</div>	
		<!--底部-->
		<div id="footer">
			<div class="center">
					<dl>
						<dt><a href="#">关于我们</a></dt>
						<dd><a href="#">公司介绍</a></dd>
						<dd><a href="#">公司领导</a></dd>
						<dd><a href="#">组织机构</a></dd>
						<dd><a href="#">企业文化</a></dd>
						<dd><a href="#">企业荣誉</a></dd>
					</dl>
					<dl>
						<dt><a href="#">新闻中心</a></dt>
						<dd><a href="#">要闻</a></dd>
						<dd><a href="#">综合新闻</a></dd>
						<dd><a href="#">一线风采</a></dd>
						<dd><a href="#">媒体聚焦</a></dd>
					</dl>
					<dl>
						<dt><a href="#">在线服务</a></dt>
						<dd><a href="#">客户服务</a></dd>
						<dd><a href="#">人才招聘</a></dd>
						<dd><a href="#">供电服务监督</a></dd>
						<dd><a href="#">优化营商环境</a></dd>
					</dl>
					<dl>
						<dt><a href="#">友情链接</a></dt>
						<dd><a href="#">国家能源局</a></dd>
						<dd><a href="#">12398能源监管热线</a></dd>
						<dd><a href="#">中国政府门户网</a></dd>
					</dl>
			</div>
			<div class="copyright">版权&copy;本项目仅供学生学习使用，不提供任何商用价值</div>
		</div>

	</body>
</html>
